iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 17
0
自我挑戰組

從0開始vue.js的30天學習日誌系列 第 17

17 JavaScript ES6 - 箭頭函式

  • 分享至 

  • xImage
  •  

箭頭函式是ES6裡一個可以更簡短宣告函式的方式,宣告方式是使用=>替代funciton,而不管在什麼情境下呼叫箭頭函式的,函式裡面的this皆是外面的this

這邊宣告匿名函式,並將此函式指定給變數a,以下為ES5寫法:

var a = function(x){
  return x+10;
}

ES6語法及其他情況的縮寫:

//一般使用箭頭函式
const a = (x) => {
  return x+10;
}

//當傳入的參數只有一個,可以省略 ( )
//切記只有一個的時後才可以這樣做,沒有參數或一個以上都要括號
const a = x => {
  return x+ 10;
}

//當函式本體只有一個return時,可以直接接在箭頭後面
const a = x => return x+10;

離題一下,那什麼是this呢?this是什麼取決於你是怎麼執行這個函式的,透過下面幾個例子,先宣告一個myPhone函式,然後我們來看在不同情境下呼叫myPhone時的this分別是哪些:

var myPhone = function(){
  console.log(this.name); 
}

直接執行myPhone()得到的this為globa:

var name = "iPhone";
myPhone();//iPhone

建立名為UT的物件,將myPhone函式指定為物件key值的函式,得到的this為物件UT

var UT = {
  name: "Sony"
}
UT.myPhone = myPhone; 
UT.myPhone();//Sony

偵聽點擊#phone執行myPhone函式,這邊的thisbtn

<button id="phone" name="HTC"></button>
var btn = document.getElementById("phone");
btn.addEventListner("click", myPhone);//HTC

總結以上例子,執行同樣的函式,但因為執行的方式不同因此得到的this也不同,回傳的結果也不同。

但如果把myPhone改為箭頭函式:

const myPhone = () => {
  console.log(this.name);
}

那麼以上三種情境呼叫函式的結果將會相同,因為箭頭函式裡面的this是他在宣告時globalthis,所以得到的結果都會是iPhone

學習箭頭函式到這,下一篇繼續Vue嚕/images/emoticon/emoticon28.gif


上一篇
16 JavaScript ES6 - 字串模板
下一篇
18 Vue實例 - (1) el,data
系列文
從0開始vue.js的30天學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言